<ion-content padding>
    <h2>My Heroes</h2>
    <ion-item>
        <ion-label>Hero name: <input #heroName/></ion-label>
        <ion-button (click)="addHero(heroName.value);heroName.value=''">
            add
        </ion-button>
    </ion-item>
    <ul class="heroes">
        <li *ngFor="let hero of heroes">
            <a routerLink="/detail/{{hero.id}}">
                <span class="badge">{{hero.id}}</span> {{hero.name}}
            </a>
            <ion-button (click)="deleteHero(hero)" class="delete" size="small" color="medium" title="delete hero">
                X
            </ion-button>
        </li>
    </ul>
</ion-content>